<template>
  <div>
    <el-form
      :label-width="80"
      :model="form"
      class="myform"
      status-icon
      :rules="rules"
      ref="myform"
    >
      <el-form-item label="手机号码" prop="phone">
        <el-input
          type="text"
          placeholder="请输入"
          v-model="form.phone"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证号码" prop="captcha">
        <!-- <el-input type="text" placeholder="请输入" v-model="form.captcha">
          <template #append>
            <el-button type="primary" @click="startSend">发送验证码</el-button>
          </template>
        </el-input> -->
        <el-row>
          <el-col :span="13">
            <el-input type="text" placeholder="请输入" v-model="form.captcha">
            </el-input>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-button
              @click="startSend"
              v-if="flag"
              :disabled="disabled"
              type="success"
              >发送验证码</el-button
            >

            <el-button v-else :disabled="disabled">剩余{{ count }} S</el-button>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item>
        <p class="flex">
          <el-button type="primary" class="btn" @click="submitForm('myform')"
            >验证</el-button
          >
          <el-button type="danger" class="btn" @click="resetForm('myform')"
            >重置</el-button
          >
        </p>
      </el-form-item>
      <el-form-item class="lastitem">
        <div class="links">
          <router-link class="litem" :to="{ name: 'register' }">
            没有账号,立即注册
          </router-link>
          <router-link class="litem color" :to="{ name: 'forgetpass' }">
            忘记密码
          </router-link>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import { ref, toRefs, reactive, watch, onUnmounted, onMounted } from "vue";
import { reg } from "@/utils/validate";
import { toast } from "@/utils/index";
import { ajax } from "@/api";
import { useRouter } from "vue-router";
var timer = null;
export default {
  name: "loginphone",
  setup() {
    const myform = ref();
    const router = useRouter();
    const state = reactive({
      form: {},
      disabled: true,
      flag: true,
      count: 120,
      rules: {
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: reg.phone,
            message: "请输入正确手机号",
            trigger: "blur",
          },
        ],
        captcha: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
          {
            pattern: reg.code,
            message: "请输入正确的验证码",
            trigger: "blur",
          },
        ],
      },
    });

    onMounted(() => {
      state.form.phone = localStorage.getItem("phone");
    });
    const resetForm = () => {
      myform.value.resetFields();
    };
    watch(state.form, (v) => {
      console.log(v);
      if (reg.phone.test(v.phone)) {
        state.disabled = false;
      } else {
        state.disabled = true;
      }
    });

    onUnmounted(() => {
      clearInterval(timer);
      timer = null;
      state.count = 120;
      state.flag = true;
    });

    const submitForm = () => {
      myform.value.validate(async (valid) => {
        if (valid) {
          let { code, result, token } = await ajax.verifycaptcha(state.form);
          if (code == 200) {
            router.push({ name: "main" });
            localStorage.setItem("phone", state.form.phone);
            sessionStorage.setItem("token", token);
          }
        } else {
          toast.error("请输入有效的验证信息");
        }
      });
    };

    const startSend = () => {
      state.count--;
      state.flag = false;
      timer = setInterval(() => {
        if (state.count > 0) {
          state.count--;
          state.flag = false;
        } else {
          clearInterval(timer);
          timer = null;
          state.count = 120;
          state.flag = true;
        }
      }, 1000);

      sendCode();
    };

    const sendCode = async () => {
      let { result, code } = await ajax.sendcaptcha({
        phone: state.form.phone,
      });
      if (code != 200) {
        clearInterval(timer);
        timer = null;
        state.count = 120;
        state.flag = true;
      }
    };
    return {
      myform,
      ...toRefs(state),
      startSend,
      resetForm,
      submitForm,
    };
  },
};
</script>



<style lang="scss" scoped>
.lastitem {
  ::v-deep .el-form-item__content {
    line-height: 1;
  }
}
</style>